@extends('Layout/userbase')
@section('header-js')

	<link rel="stylesheet" type="text/css" href="{{ asset('css/base.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ asset('css/base.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ asset('css/member.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ asset('css/base.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ asset('css/member.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ asset('css/home.css') }}">

	<script type="text/javascript" src="{{ asset('js/jquery.js') }}"></script>
	<script type="text/javascript" src="{{ asset('js/js-tab.js') }}"></script>

	<style>
			.addressdisplay{
					display: 'block';
			}
	</style>
	    <!-- 引入地址三级联动的组件 -->
	    <link href="{{ asset('js/h-ui-jquery.min.js') }}" rel="stylesheet" type="text/css" />
	    <script type="text/javascript" src="{{ asset('js/jquery.provincesCity.js') }}"></script>
	    <script type="text/javascript" src="{{ asset('js/provincesData.js') }}"></script>
	    <!-- 引入地址三级联动的组件结束 -->


	    <script type="text/javascript">

	    {{-- 地址三级联动方法开始 --}}
	    $(function(){
	        $("#province").ProvinceCity();
	    });
	    {{-- 地址三级联动方法结束 --}}

	         (function(a){
	             a.fn.hoverClass=function(b){
	                 var a=this;
	                 a.each(function(c){
	                     a.eq(c).hover(function(){
	                         $(this).addClass(b)
	                     },function(){
	                         $(this).removeClass(b)
	                     })
	                 });
	                 return a
	             };
	         })(jQuery);

	         $(function(){
	             $("#pc-nav").hoverClass("current");
	         });




	         $(document).ready(function($){

	             {{-- 新增地址的弹框 --}}
	             $(".btn1").click(function(event){
	                 $(".hint").css({"display":"block"});
	                 $(".box").css({"display":"block"});
	                 {{--弹框之前先清空原有内容--}}
	                 $('#getname').val('');
	                 $('#addressdetail').val('');
	                 $('#phone').val('');

	             });

	             {{-- 编辑地址的弹框 --}}
	             $(".btn2").click(function(event){
	                 //分别拿到原有收件信息的各个值
									var oldgetname = $(this).parent().parent().children().first().children().first().children().last().html();
									var oldphone = $(this).parent().parent().children().first().children().last().children().last().html();
									var oldaddress = $(this).parent().parent().children().first().children().first().next().children().last().html();
									var oldaddressdetail = $(this).parent().parent().children().first().children().first().next().next().children().last().html();

									 id = $(this).prop('id');


	                 //显示编辑框
	                 $(".hint").css({"display":"block"});
	                 $(".box").css({"display":"block"});
	                 // {{--把原收件信息显示在编辑的各个框内--}}
	                 $('.hint2').text('编辑收货地址');
	                 $('#getname').val(oldgetname);
	                 $('#addressdetail').val(oldaddressdetail);
	                 $('#phone').val(oldphone);

	             });




	             //JS判断输入数据是否合法
	             $('#getname').blur(function() {
	                 // 判断之前，先把之前提示的信息清空
	                 $('.getname').text('');
	                 //列出正则
	                 var reg = /\s/;
	                 //获取输入框信息
	                 var vals = this.value;
	                 //JS判断

	                 if (reg.test(vals) || vals == '' ) {
	                     $('.getname').text('*收件人不能为空');
	                 }
	             });

	             //在处理详细地址的鼠标离开事件之前，先处理详细地址的获取鼠标事件，用于处理数据选择省份城市和区域等数据是否为空
	             $('#addressdetail').focus(function() {
	                 $('.addressbody').text('');
	                 var procince = $('#province select').val();
	                 var city = $('#province select').next().val();
	                 var area = $('#province select').next().next().val();
	                 if (province == '请选择' || city == '请选择' || area == '请选择') {
	                     $('.addressbody').text('*省~市~区~皆不能为空');
	                 }
	             });

	             $('#addressdetail').blur(function() {
	                 $('.addressdetail').text('');
	                 var reglength = /^[\u4E00-\u9FA5A-Za-z0-9]{5,50}$/;
	                 var vals = this.value;
	                 if (!reglength.test(vals)) {
	                     $('.addressdetail').text('*详细地址请输入5到50个字符之间');
	                 }
	             });

	             $('#phone').blur(function() {
	                 $('.phone').text('');
	                 var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
	                 var vals = this.value;
	                 //JS处理输入内容不能为空
	                 if (!reg.test(vals) || vals == '' ) {
	                     $('.phone').text('*手机号码不正确');
	                 }
	             });

	             $('.hint-in3').submit(function() {

	             })

	             $(".hint-in3").click(function(event) {
	                 {{--
	                 $(".hint").css({"display":"none"});
	                 $(".box").css({"display":"none"});
	                 --}}

	                 {{-- 获取各元素的值并列出正则 --}}
	                 var getname_reg = /^[\u4E00-\u9FA5A-Za-z0-9_]{1,15}$/;
	                 var addressdetail_reg = /^[\u4E00-\u9FA5A-Za-z0-9]{5,50}$/;
	                 var phone_reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
	                 var getname = $('#getname').val();
	                 var province = $('#province select').val();
	                 var city = $('#province select').next().val();
	                 var area = $('#province select').next().next().val();
	                 var addressdetail = $('#addressdetail').val();
	                 var phone = $('#phone').val();

	                 if (!getname_reg.test(getname) || !addressdetail_reg.test(addressdetail)
	                 || !phone_reg.test(phone) || province == '请选择' || city == '请选择'
	                 || area == '请选择') {
	                        $('.address').html('*请检查您的输入是否正确');
	                        $(".hint").css({"display":"block"});
	                        $(".box").css({"display":"block"});

	                 } else {
	                     {{-- 在这里根据弹窗的标题判断是编辑收件信息还是新增收件信息,下面是新增收件信息 --}}

											 // 收货地址区间
											 if ($('.hint2').html() === '添加收货地址') {
													 $.ajax({
															dataType: 'json',
															type: 'post',
															data: "_token={{ csrf_token() }}&getname=" + getname +
															 '&province=' + province + '&city=' + city + '&area=' +
																area + '&addressdetail=' + addressdetail + '&phone='
																+ phone,
															url: '{{ route("user.doaddress") }}',
															success: function(data) {

																	console.log(typeof data.status);
																	if (data === 403) {
																		 $('.address').html('*最多创建3个地址');
																	} else if (data === 500) {
																		 $('.addressbody').text('*省~市~区~皆不能为空');
																	} else if (data.status === 200) {
																			$('#addressul').append("<li class='clearfix'><div class='user-info1 fl clearfix'><div class='user-info'><span class='info1'>收货人：</span><span class='info2'>" + getname + "</span></div><div class='user-info'><span class='info1'>所在地区：</span><span class='info2'>" + province + city + area + "</span></div><div class='user-info'><span class='info1'>地址：</span><span class='info2'>" + addressdetail + "</span></div><div class='user-info'><span class='info1'>手机：</span><span class='info2'>" + phone + "</span></div></div><div class='pc-event'><a href='javascript:void(0);' class='pc-event-d' onclick='defaultaddress(this, " + data.id + ")'>设为默认地址</a><a class='btn2' id='" + data.id + "' href='javascript:void(0);'>编辑 </a><a id='H-table li' href='javascript:void(0);' onclick='del(this, " + data.id + ")'>删除</a></div><div id='checked' class='default fl'><a href='javascript:void(0);'>默认地址</a></div></li>")

																			$(".box").css({"display":"none"});
																			$(".hint").css({"display":"none"});
																	} else if (data.status === 2200) {
																			$('#addressul').append("<li class='clearfix'><div class='user-info1 fl clearfix'><div class='user-info'><span class='info1'>收货人：</span><span class='info2'>" + getname + "</span></div><div class='user-info'><span class='info1'>所在地区：</span><span class='info2'>" + province + city + area + "</span></div><div class='user-info'><span class='info1'>地址：</span><span class='info2'>" + addressdetail + "</span></div><div class='user-info'><span class='info1'>手机：</span><span class='info2'>" + phone + "</span></div></div><div class='pc-event'><a href='javascript:void(0);' class='pc-event-d' onclick='defaultaddress(this, " + data.id + ")'>设为默认地址</a><a class='btn2' id='" + data.id + "' href='javascript:void(0);'>编辑 </a><a id='H-table li' href='javascript:void(0);' onclick='del(this, " + data.id + ")'>删除</a></div></li>")

																			$(".box").css({"display":"none"});
																			$(".hint").css({"display":"none"});
																	}


															},
													});
											 } else if($('.hint2').html() === '编辑收货地址') {
													 $.ajax({
															dataType: 'json',
															type: 'post',
															data: "_token={{ csrf_token() }}&getname=" + getname +
															 '&province=' + province + '&city=' + city + '&area=' +
																area + '&addressdetail=' + addressdetail + '&phone='
																+ phone + "&id=" + id,
															url: '{{ route("user.updateaddress") }}',
															success: function(data) {
																	console.log(data);

																	var address = province + city + area;
																	if (data == 500) {
																		 $('.addressbody').text('请确认填写信息');
																	}

																	if (data == 200) {
																		console.log(id);
																			$('#' + id).parent().prev().children().first().children().last().html(getname)
																			$('#' + id).parent().prev().children().first().next().children().last().html(address);
									 	                  $('#' + id).parent().prev().children().first().next().next().children().last().html(addressdetail);
									 	                  $('#' + id).parent().prev().children().first().next().next().next().children().last().html(phone);

																			$(".box").css({"display":"none"});
																			$(".hint").css({"display":"none"});
																	}
															},
													});
											 }
	                 }

	             });




	             $(".hint3").click(function(event) {
	                 $(this).parent().parent().css({"display":"none"});
	                 $(".box").css({"display":"none"});
	             });

	             $("#H-table li").each(function(i){
	                 $(this).click((function(k){
	                     var _index = k;
	                     return function(){
	                         $(this).addClass("cur").siblings().removeClass("cur");
	                         $(".H-over").hide();
	                         $(".H-over:eq(" + _index + ")").show();
	                     }
	                 })(i));
	             });

	         });

	         {{-- 地址的删除 --}}
	         function del(obj, id) {
	             console.log(id);
	             $(obj).parent().parent().remove();
	             {{-- 在下面通过AJAX将id传值给后台删除数据库里面用户的地址数据 --}}

							 $.ajax({
									dataType: 'json',
									type: 'post',
									data: "_token={{ csrf_token() }}" + "&id=" + id,
									url: '{{ route("user.destroy") }}',
									success: function(data) {

									},
							});
	         }
function defaultaddress(obj, id) {


		$('#defaultaddress').remove();
		$('#checked').remove();
		$(obj).parent().parent().append('<div id="checked" class="default fl"><a href="#">默认地址</a></div>')
		$.ajax({
			 dataType: 'json',
			 type: 'post',
			 data: "_token={{ csrf_token() }}" + "&id=" + id,
			 url: '{{ route("user.changedefault") }}',
			 success: function(data) {
					if (data == 200) {

					}
			 },
	 });
}

</script>
</head>
	@endsection


	{{--新增地址的小窗口--}}
	<div class="box">
	    <div class="hint">

	            <div class="hint-in1">
	                <div class="hint2">添加收货地址</div>
	                <div class="hint3"></div>
	            </div>

								@if (session('message'))
								<div class="Huialert Huialert-error">
									<h4 style="color:red;margin-top:10px;">{{ session('message') }}</h4>
								</div>
								@endif
								@if (count($errors) > 0)
								<div class="Huialert Huialert-danger">
									<ul>
										@foreach ($errors->all() as $error)
										<li><h4 style="color:red;margin-top:10px;">{{ $error }}</h4></li>
										@endforeach
									</ul>
								</div>
								@endif

	            <div class="pc-label"><label><i class="reds "></i>收货人:</label>
	                <p class="getname" style="color:red"></p>
	                <input style="height:25px;width:200px" type="text"  id="getname" placeholder="请您填写收货人姓名">
	            </div>
	            <div id="sjld" style="margin-top:10px; padding-left:40px; position:relative;" class="clearfix">

	                <div class="clearfix" style="padding-bottom:5px;"><i class="reds fl"></i>
	                    <p class="fl" style="padding-right:0px">所在地区<b>(※请务必确认*省*市*区※)</b>:</p>
	                    <p class="addressbody" style="color:red;"></p>
	                </div>


	                <div id="province" style="float:left"></div>


	            </div>

	            <div class="pc-label"><label><i class="reds "></i>详细地址:</label>
	                <p class="addressdetail" style="color:red"></p>
	                <input style="height:25px;width:500px" id="addressdetail" type="text" style="width:400px; " placeholder="请您填写收货人详细地址">
	            </div>
	            <div class="pc-label"><label><i class="reds "></i>手机号码:</label>
	                <p class="phone" style="color:red"></p>
	                <input style="height:25px;width:200px" id="phone" type="text" style="width:400px;"placeholder="请您填写收货人手机号码">
	            </div>
	            <p class="address" style="color:red" style="float:left"></p>
	            <button href="javascript:;" class="hint-in3" id="address">保存收货地址</button>

	    </div>

	</div>

@section('content')
<div class="member-right fr">
    <div class="member-head">
        <div class="member-heels fl"><h2>地址管理</h2></div>
    </div>
    <div class="member-border">
        <div class="member-newly"><b class="btn1"  style="margin: 0 auto;margin-left:20px;margin-top:2px;padding:0 auto;padding-top:2px;color:red;cursor:pointer;">新增收货地址</b>您已经创建了<i class="reds">{{ count($address) }}</i>个收货地址了，最多可创建<i class="reds">3</i>个</div>
        <div class="member-sites">
            <ul id='addressul'>
						@if (!empty($address))
							@foreach ($address as $val)
								@if ($val['whether_address'] == 1)
                  <li class="clearfix">
                      <div class="user-info1 fl clearfix">
                          <div class="user-info">
                              <span class="info1">收货人：</span>
                              <span class="info2">{{ $val['getname'] }}</span>
                          </div>
                          <div class="user-info">
                              <span class="info1">所在地区：</span>
                              <span class="info2">{{ $val['ssq'] }}</span>
                          </div>
                          <div class="user-info">
                              <span class="info1">地址：</span>
                              <span class="info2">{{ $val['address'] }}</span>
                          </div>
                          <div class="user-info">
                              <span class="info1">手机：</span>
                              <span class="info2">{{ $val['phone'] }}</span>
                          </div>
                      </div>
                      <div class="pc-event">
                          <a href="javascript:void(0);" class="pc-event-d" onclick="defaultaddress(this, {{ $val['id'] }})">设为默认地址</a>
                          <a class='btn2' id="{{ $val['id'] }}" href="javascript:void(0);">编辑 </a>
                          <a id="H-table li" href="javascript:void(0);" onclick="del(this, {{ $val['id'] }})">删除</a>
                      </div>
												<div id="checked" class="default fl"><a href="#">默认地址</a></div>
	                  </li>
									@endif
								@endforeach
								@foreach ($address as $v)
									@if  ($v['whether_address'] == 2)
										<li class="clearfix">
												<div class="user-info1 fl clearfix">
														<div class="user-info">
																<span class="info1">收货人：</span>
																<span class="info2">{{ $v['getname'] }}</span>
														</div>
														<div class="user-info">
																<span class="info1">所在地区：</span>
																<span class="info2">{{ $v['ssq'] }}</span>
														</div>
														<div class="user-info">
																<span class="info1">地址：</span>
																<span class="info2">{{ $v['address'] }}</span>
														</div>
														<div class="user-info">
																<span class="info1">手机：</span>
																<span class="info2">{{ $v['phone'] }}</span>
														</div>
												</div>
												<div class="pc-event">
														<a href="javascript:void(0);" class="pc-event-d" onclick="defaultaddress(this, {{ $v['id'] }})">设为默认地址</a>
														<a class='btn2' id="{{ $v['id'] }}" href="javascript:void(0);">编辑 </a>
														<a id="H-table li" href="javascript:void(0);" onclick="del(this, {{ $v['id'] }})">删除</a>
												</div>
										</li>
									@endif
									@endforeach
							</ul>
						@else
							<ul>
								<li class="clearfix">
									<div class="user-info1 fl clearfix">
										<h1>暂无地址~<a href="javascript:void(0);" style="color:#EA4949;cursor:pointer;">请添加地址</a></h1>
									</div>
								</li>
							</ul>
						@endif
        </div>
        <!-- <div class="member-pages clearfix">
            <div class="fr pc-search-g">
                <a href="#" class="fl pc-search-f">上一页</a>
                <a class="current" href="#">1</a>
                <a href="javascript:;">2</a>
                <a href="javascript:;">3</a>
                <a href="javascript:;">4</a>
                <a href="javascript:;">5</a>
                <a href="javascript:;">6</a>
                <a href="javascript:;">7</a>
                <span class="pc-search-di">…</span>
                <a onClick="SEARCH.page(3, true)" href="javascript:;" class="pc-search-n" title="使用方向键右键也可翻到下一页哦！">下一页</a>
            </div>
        </div> -->
    </div>
</div>
<!-- 商城快讯 End -->


@endsection
